<template>
    <div style="margin-top:20px;background:#F1F5F8;">
        <van-list
            v-model:loading="state.loading"
            :finished="state.finished"
            finished-text="没有更多了"
            @load="onLoad"
        >
        <van-cell v-for="item in list" :key="item.appointmentId" class="van-cell">
            <template #title>
                <section class="orderBox">
                    <div class="order">
                        <span>维修单号：</span>
                        <span>{{item.id}}</span>
                        <van-image :src="fz" class="fzImg"/>
                    </div>
                    <view v-if="item.status=='待施工'" class="btn">
                        <span >待施工</span>
                    </view>
                    <view v-if="item.status=='已完工'" class="btn">
                        <span>已完工</span>
                    </view>
                    <view v-if="item.status=='已提车'" class="btn">
                        <span >已提车</span>
                    </view>
                </section>
                <section>
                    <div>车型：</div>
                    <div>{{item.cheXing}}</div>
                </section>
                <section>
                    <div>车牌：</div>
                    <div>{{item.carNo}}</div>
                </section>
                <section>
                    <div>车主姓名：</div>
                    <div>{{item.customerName}}</div>
                </section>
                <section>
                    <div>车主电话：</div>
                    <div>{{item.phone}}</div>
                </section>
                <section>
                    <div>施工人：</div>
                    <div>{{item.staffName}}</div>
                </section>
                <section>
                    <div>创建时间：</div>
                    <div>{{item.createTime}}</div>
                </section>
                <view v-if="item.status!='已提车' && item.status!='已完工' && state.userInfo.remarkOne!='库管'" class="btnList">
                    <van-button v-if="state.userInfo.remarkOne!='维修工'" class="btn" @click="clickCardBtn([1,item])">指派施工人</van-button>
                    <van-button class="btn" @click="clickCardBtn([2,item])">领料</van-button>
                    <van-button class="btn" @click="clickCardBtn([3,item])">项目</van-button>
                    <van-button v-if="state.userInfo.remarkOne!='维修工'" class="btn" @click="clickCardBtn([4,item])">竣工</van-button>
                </view>
            </template>
        </van-cell>
    </van-list>
    </div>
</template>
<script setup>
    import {defineEmit, defineProps, reactive} from 'vue'
    import fz from 'assets/fz.png';
    import { useStore } from "vuex";
    const store = useStore();
    //本组件的状态
    const state = reactive({
        list:[],
        loading: false,
        finished: false,
        userInfo:{}
    });
    const appointmentTypeList = [
        ,'三电维保','保养','维修','洗车'
    ]

    //event
    const emit = defineEmit(['onSearch'])
    //props
    const props = defineProps({
        list:Array,
        total:Number
    })
    const onLoad = () => {
        var userInfo = store.getters['user/users'];
        state.userInfo = userInfo;
        console.log('onload....')
        // 异步更新数据
        emit('onSearch')
        // 加载状态结束
        state.loading = false;
        state.finished = true;
        // if(props.list.length>=props.total){
        //     state.finished = true;
        // }
    };
    const clickCardBtn = (param)=> {
        console.log('哈哈哈')
        var index = param[0];
        var item = param[1]
        if(index == 1){
            emit("onChooseEmployee",item)
        }else if(index == 2){
            emit("onChooseTake",item)
        }else if(index == 3){
            emit("onChooseXm",item)
        }else if(index == 4){
            emit("onChooseJg",item)
        }
    }
</script>
<style lang="scss" scoped>
.van-list{
    margin: 0 .9375rem /* 15/16 */;
}
.van-cell{
    border-radius: .625rem /* 10/16 */;
}
.van-cell:not(:first-child){
    margin-top:.9375rem /* 15/16 */;
}
.orderBox{
    display: flex;
    justify-content: space-between;
    width:100%;
    height: 3.125rem /* 50/16 */;
    border-bottom:1px solid #E5EBEF;
    .order{
        font-size: 1rem /* 16/16 */;
        font-family: PingFang SC;
        font-weight: 500;
        color: #000000;
        display: flex;
        align-items: center;
        .fzImg{
            width: 1.25rem /* 20/16 */;
            height: 1.25rem /* 20/16 */;
            margin-left:.3125rem /* 5/16 */;
        }
    }
    .btn{
        width: 3.75rem /* 60/16 */;
        height: 1.25rem /* 20/16 */;
        line-height: 1.25rem /* 20/16 */;
        background: rgba(255, 176, 82, 0.1);
        border-radius: 3px 12px 3px 12px;
        font-size: .6875rem /* 11/16 */;
        font-family: PingFang SC;
        font-weight: 500;
        color: #FFB052;
    }
}
.van-cell{
    section{
        display: flex;
        justify-content: space-between;
        div:nth-of-type(1){
            font-size: .9375rem /* 15/16 */;
            font-family: PingFang SC;
            font-weight: 400;
            color: #49596D;
            line-height: 2.1875rem /* 35/16 */;
        }
        div:nth-of-type(2){
            font-size: .9375rem /* 15/16 */;
            font-family: PingFang SC;
            font-weight: 500;
            color: #101D34;
            line-height: 2.1875rem /* 35/16 */;
        }
    }
}
.btnList{
    display:flex;
    justify-content: space-around;
    border-top:1px solid #E5EBEF;
    padding-top:.625rem /* 10/16 */;
    button{
        height: 1.875rem /* 30/16 */;
        border: 1px solid #5E2F88;
        font-size: .8125rem /* 13/16 */;
        font-family: PingFang SC;
        font-weight: 500;
        color: #5E2F88;
        border-radius: .9375rem /* 15/16 */;
    }
}
</style>